<template>
  <div>
    <div style="padding: 40px;">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="管理员姓名:">
          <el-input size="small" placeholder="请输入管理员姓名" v-model="form.textname" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="账号:">
          <el-input size="small" placeholder="请输入账号" v-model="form.name" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input size="small" placeholder="请输入密码" v-model="form.password" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="所属门店:">
          <el-input size="small" placeholder="选择门店" v-model="form.door" style="width: 200px;"></el-input>
          <el-button size="small" @click="chose">选择门店</el-button>
        </el-form-item>
        <el-form-item label="角色名称:">
          <el-select size="small" @change="change" v-model="sel" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-radio @input="change" style="margin-top: 13px;" v-model="form.active" label="1">启用</el-radio>
          <el-radio @input="change" style="margin-top: 13px;" v-model="form.active" label="2">禁用</el-radio>
        </el-form-item>
      </el-form>
      <!-- 遮罩层 -->
      <div class="zz" v-show="flag">
        <div class="set">
          <!-- 头部 -->
          <div class="setTop">
            <p>选择商品</p>
            <i class="el-icon-close" style="font-size: 20px;font-weight: bold;" @click="flag = false"></i>
          </div>
          <!-- 搜索 -->
          <div style="padding: 20px;">
            <div class="seachdiv">
              <p style="margin-top: 5px;">药品名称</p>
              <div>
                <input type="text" v-model="search" class="ipt">
                <button class="btn" style="padding: 0 20px;" @click="seaBtn">搜索</button>
              </div>
            </div>
            <!-- 表格 -->
            <div class="gun">
              <table>
                <th>门店名称</th>
                <th>操作</th>
                <tr v-for="item in shopList" :key="item.id">

                  <td>{{ item.name }}</td>
                  <td>
                    <!-- <button class="chose1" @click='no(item)' >取消</button> -->
                    <button class="chose" @click="ok(item.name)">选择</button>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="btnDiv1">
        <el-button type="primary" @click="qd" size="small">确定</el-button>
        <el-button size="small" @click="qx">取消</el-button>
      </div>
    </div>

  </div>
</template>
<script>
import { setLoginBx, getShopListBx, getLoginBx,getRoleBx } from '../../utils/api'
export default {
  data() {
    return {
      form: {
        id: 0,
        textname: '',
        name: '',
        password: '',
        door: '',
        role: '',
        active: '1',
      },
      options: [],
      // 下拉默认内容
      sel: '管理员',
      flag: false,
      search: '',
      shopList: [],
    }
  },
  created() {
    const Tid = this.$route.query.id
    // console.log(Tid);
    this.form.id = Tid
    getLoginBx().then(res => {
      const obj = res.data.data.find(item => {
        return item.id == Tid
      })
      // console.log(obj);
      this.form = obj
      this.sel = obj.role
      
    })
    getRoleBx().then(res=>{
        this.options = res.data.data
      })

  },
  methods: {
    chose() {
      
      getShopListBx().then(res => {
        this.shopList = res.data.data
        if (res.status == 200) {
          this.flag = true
        }
      })
     
    },
    qx() {
      this.$router.push('/limits/admin/list')
    },
    qd() {
      setLoginBx(this.form).then(res => {
        if (res.status == 200) {
          this.$router.push('/limits/admin/list')
        }
      })
    },
    ok(name) {
      this.form.door = name
      this.flag = false
    },
    //搜索
    seaBtn() {
      const jg = this.shopList.filter(item => {
        return item.name.includes(this.search)
      })
      this.shopList = jg
      console.log(jg);
    },
    change() {
      this.form.role = this.sel
    },
  }
}
</script>
<style scoped>
div/deep/.el-form-item__label {
  margin-right: 40px;
}

.btnDiv1 {
  width: 200px;
  display: flex;
  justify-content: space-between;
  margin-left: 100px;
  margin-top: 80px;
}

.gun {
  height: 250px;
  width: 100%;
  overflow: auto;
  /* overflow-y: hidden; */
}

.btnDiv button {
  border: 1px solid rgba(187, 187, 187, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
  width: 50px;
  height: 30px;
}

.btnDiv {
  /* margin-left: 100px; */
  width: 30%;
  display: flex;
  margin: 30px auto;
  justify-content: space-between;
}

.chose1 {
  width: 50px;
  height: 27px;
  line-height: 27px;
  /* padding: 0 10px; */
  background-color: red;
  color: #fff;
  border-radius: 3px;
  border: none;
}

.chose {
  width: 50px;
  height: 27px;
  line-height: 27px;
  /* padding: 0 10px; */
  background-color: #0790F5;
  color: #fff;
  border-radius: 3px;
  border: none;
}

table {
  margin-top: 30px;
  border: 1px solid #777777;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  font-size: 14px;
}

tr {
  height: 40px;
}

td {
  width: 100px;
  border: 1px solid #777777;
}

th {
  height: 40px;
  line-height: 40px;
  font-weight: normal;
  background-color: #F6F6F6;
  border: 1px solid #777777;
}

.btn {
  height: 30px;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 3px;
  background-color: #fff;
  /* padding: 0 20px; */
}

.ipt {
  width: 400px;
  height: 30px;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 3px;
}

.seachdiv {
  display: flex;
  justify-content: space-between;
  width: 85%;

}

.setTop {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #a5a5a5;
}

.set {
  font-size: 14px;
  width: 50%;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 5px;

}

.zz {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>